<template>
	<view class="pb-safe-area ">
		<view class="bg">
			<view :style="`padding-top:${top}px`">
				<uv-navbar placeholder :bgColor="bgc" left-icon="" :fixed='false'>
					<template v-slot:left>
						<text class="fs-20 fw-600  mx-10 block w-50">动态</text>
					</template>
					<template v-slot:center>

						<!-- #ifndef H5 -->
						<view>
							<view class="rounded-30 w-p-90 p-10 flex h-34 box-sizing flex-y-center"
								:class="{'bg-white':bgc=='none','border-grey-4':bgc=='#fff'}">
								<uv-icon name='search' size="20"></uv-icon>
								<input class="ml-2" placeholder="输入关键词..." v-model="queryForm.keyword"
									placeholder-class="fs-14" @confirm="search" />
							</view>
						</view>
						<!-- #endif -->

						<!-- #ifdef H5 -->
						<view class=" rounded-30  p-10 flex h-34 box-sizing flex-y-center"
							:class="{'bg-white':bgc=='none','border-grey-4':bgc=='#fff'}">
							<uv-icon name='search' size="20"></uv-icon>
							<input class="ml-2" placeholder="输入关键词..." v-model="queryForm.keyword"
								placeholder-class="fs-14" @confirm="search" />
						</view>
						<!-- #endif -->
					</template>
				</uv-navbar>
			</view>
			<uv-tabs :list="tabsList" lineColor="#3D5CFF" inactive-style="color:#8B90AA;"
				active-style="font-size:16px;font-weight:600;color:#000;" @change="onChange"></uv-tabs>

			<view>
				<z-paging ref="paging" :top-z-index='1' @query="getList" use-page-scroll v-model="list">
					<view class="flex flex-column grid-gap-10 p-4  mt-4">
						<view class=" rounded-4 p-4 under-line" v-for="(item, index) in list" :key="index"
							@click="$page.open('/pages/moments/detail?id='+item.id)">
							<view class="flex flex-x-space-between">
								<view class="flex ">
									<image :src="item.user.avatar" mode="scaleToFill" class="rounded-circle"
										style="width: 44px;height: 44px;" />
									<view class="flex flex-column ml-10">
										<text class="fs-16 font-weight-500">{{item.user.nickname}}</text>
										<text class="fs-12 pt-4 text-grey-4">{{item.create_at}}</text>
									</view>
								</view>
								<view>
									<view class="border-blue-1 flex rounded-30 px-12 py-5 flex-y-center"
										v-if="item.follow_id==null" @click.stop="follow(item,index)">
										<uv-icon name="plus" color="#3D5CFF" size="13" bold></uv-icon>
										<text class="fs-12 text-blue-1 ml-2 fw-600">收藏</text>
									</view>
									<view v-else @click.stop="follow(item,index)">
										<text style="background-color: #F0F9FF;"
											class="rounded-30 px-17 py-7 text-blue-1 fs-12 fw-600">
											已收藏
										</text>
									</view>
								</view>
							</view>
							<view class="mt-16 position-relative"
								:class="{'h-50 overflow-hidden': !elData[index]?.height}">
								<view class=" position-absolute bottom-3 right-10 " style="background-color: #FAFAFD;"
									v-if="elData[index]?.height>50&&item.show==false" @click.stop="item.show=true">
									... <text class="text-blue-1">全文</text>
								</view>
								<text class="line-height-2 fs-16  desc py-2  fw-500"
									:class="{'text-ellipsis-2':elData[index]?.height>50 && item.show==false}">{{item.content}}</text>

								<text class="text-blue-1 ml-4" v-if="elData[index]?.height>50&&item.show==true"
									@click.stop="item.show=false">收起
								</text>
							</view>
							<view class="grid-columns-6 grid-gap-2 mt-10" v-if="item.images?.length">
								<view class="grid-column-2" v-for="(url,index) in item.images" :key="index"
									@tap.stop="preview(index,item.images)">
									<image :src="url" lazy-load mode="aspectFill" class="w-100 h-100 rounded-4" />
								</view>
							</view>


							<view class="flex  mt-21">
								<view class="grow-1 flex flex-center" @click.stop="likes(item,index)">
									<uv-icon name="heart" v-if="item.likes_id==null" color="#ACACAC"
										size="24"></uv-icon>
									<uv-icon name="heart-fill" v-if="item.likes_id!=null" color="#EA4545"
										size="24"></uv-icon>
									<text class="fs-14 text-grey-4 ml-8">{{item.likes}}</text>
								</view>
								<view class="grow-1 flex flex-center">
									<uv-icon name="chat" color="#ACACAC" size="24"></uv-icon>
									<text class="fs-14 text-grey-4 ml-8">{{item.comment}}</text>
								</view>
								<view class="grow-1 flex flex-center">
									<button class="btn-normal" open-type="share" @click.stop="shareIndex=index">
										<image src="@/static/icon/moments/fx.png" class="w-16 h-16"></image>
										<text class="fs-14 text-grey-4 ml-8">{{item.share}}</text>
									</button>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>

		<y-loading v-if="show"></y-loading>
		<view class="position-fixed right-15 " :style="`bottom:${bottom}px`" @click="$page.open('/pages/moments/form')">
			<image src="@/static/icon/fb.png" style="width: 130rpx;height: 130rpx; z-index: 9999;"></image>
		</view>
		<y-tabbar></y-tabbar>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { ref, nextTick, getCurrentInstance } from 'vue';
	import { $http, $tool, $page } from '@/utils';
	import { onReachBottom, onLoad, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
	import { useUserStore, useRefs, useWebConfigStore } from "@/stores/index";
	import { $interstitialAd } from '@/utils/ad'
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const top = ref(0)
	const width = uni.getSystemInfoSync().windowWidth
	const paging = ref()
	const list = ref([])
	const show = ref(false)
	const shareIndex = ref(0)
	const elData = ref([])
	const bottom = ref(0)
	const queryForm = ref({
		page: 1,
		limit: 10,
		type: -1,
		keyword: ''
	})
	const bgc = ref('none')
	const tabsList = ref([])
	useZPaging(paging)
	onLoad(() => {
		// #ifdef MP||MP-TOUTIAO
		if (WEBCONFIG.value?.weixin_interstitial_status == '1') {
			$interstitialAd.init(WEBCONFIG.value?.weixin_interstitial_ad_id)
			$interstitialAd.show()
		}
		// #endif
		// #ifdef H5
		top.value = 15
		// #endif
		if (WEBCONFIG.value?.custom_tabbar == 1) {
			bottom.value = 60 + uni.getSystemInfoSync().safeAreaInsets.bottom
		}
		// #ifdef H5
		bottom.value = 60 + uni.getSystemInfoSync().safeAreaInsets.bottom
		// #endif
		getCategory()
	})
	const getCategory = () => {
		$http.get('Moments/getCategory').then(res => {
			tabsList.value = res.data
		})
	}
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			bgc.value = "#fff"
		}
		if (e.scrollTop < 100) {
			bgc.value = "none"
		}
	})
	const search = () => {
		paging.value.reload()
	}
	const getList = (page, limit) => {
		show.value = true
		queryForm.value.page = page
		queryForm.value.limit = limit
		$http.get('Moments/getList', queryForm.value).then(res => {
			for (let i = 0; i < res.data.length; i++) {
				res.data[i]['show'] = false
			}
			paging.value.complete(res.data)
			nextTick(() => {
				const query = uni.createSelectorQuery()
				setTimeout(() => {
					query.selectAll('.desc').boundingClientRect(res => {
						elData.value = res;
					}).exec()
				}, 500)
				show.value = false
			})
		}).catch(() => {
			show.value = false
		})
	}

	const likes = (e, index) => {
		$http.post('Moments/like', { id: e.id }).then(res => {
			$tool.toast(res.msg)
			nextTick(() => {
				if (e.likes_id) {
					list.value[index]['likes_id'] = null
					list.value[index]['likes'] -= 1
				} else {
					list.value[index]['likes_id'] = e.id
					list.value[index]['likes'] += 1
				}
				list.value
			})
		})
	}

	const changeTabbar = (e) => {
		if (e.type == '1') {
			$page.switch(e.path)
		}
		if (e.type == '2') {
			$page.open(e.path + '?' + e.param)
		}
	}

	const onChange = (e) => {
		console.log(e)
		queryForm.value.type = e.id
		paging.value.reload()
	}
	const follow = (e, index) => {
		$http.post('Moments/follow', { id: e.id }).then(res => {
			$tool.toast(res.msg)
			if (e.follow_id) {
				list.value[index]['follow_id'] = null
			} else {
				list.value[index]['follow_id'] = e.id
			}
		})
	}
	const preview = (index, urls) => {
		uni.previewImage({
			current: index,
			urls: urls
		});
	}


	onShareAppMessage(() => {
		$http.post('Moments/addShre', { id: list.value[shareIndex.value]['id'] }).then(res => {
			nextTick(() => {
				list.value[shareIndex.value]['share'] += 1
			})
		})
		return {
			title: list.value[shareIndex.value]['content'],
			path: 'pages/moments/detail?id=' + list.value[shareIndex.value]['id'],
			imageUrl: list.value[shareIndex.value]['images'][0] || ''
		}
	})
</script>

<style lang="scss" scoped>
	.under-line {
		border-bottom: 2rpx solid #F1F1F1;
	}

	.bg {
		height: 750rpx;
		background: radial-gradient(circle at -30% -50%, #78DDFF -100%, transparent 70%);
		background-repeat: no-repeat;
		background-position: top center;
		/* #ifdef H5 */
		background-attachment: fixed;
		/* #endif */
		box-sizing: border-box;
	}


	page {
		background-color: white;
	}
</style>